// 由于需要大量用到上下文中的方法和属性

// 所以，setup函数一定要定义为function
export default function() {
	const { $val, $ref, $watchEffect } = $modules;
	const count = $ref(1);
	// 注：$watchEffect默认为异步，即在一个同步任务中，函数体中多个响应式都发生变化，
	// 默认会等待一个宏任务，在同步任务执行完成后，再统一计算一次
	// 优点是成倍减少计算量，缺点是无法同步关联促发
	$watchEffect(() => {
		// 与$computed相似，函数体中所有响应式的变化，均会关联触发该函数的再次执行
		// 与$computed不同的是，$watchEffect不需要返回处理结果，也不会返回执行结果
		console.log(`默认为异步影响：${count.value}`)
	});

	// 配置同步的关联影响模式，即函数体中任何的响应式变化，会立即执行
	// 注：由于同步触发时，响应式对象的值还未更新，因此变化过程中的值以回调值为准
	// 配合field可确定触发属性，建议一个$watchEffect仅对一个扁平响应式对象关联影响
	$watchEffect((v = count.value, field) => {
		// 与$computed相似，函数体中所有响应式的变化，均会关联触发该函数的再次执行
		// 与$computed不同的是，$watchEffect不需要返回处理结果，也不会返回执行结果
		console.log(`同步影响：${v}`, field)
	}, { model: 'sync' });
	this.add(
		'点击数字：',
		this.render({
			children: $val(count, 'value'),
			// 点击试试
			onClick: () => {
				++count.value;
			}
		})
	);
}